@import "common.scss";
@import url(https://at.alicdn.com/t/c/font_3598588_g53rdyao5lw.css);
@function getvw($w){
    @return ($w/750)*100+vw;
}
%title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .left{
        display: flex;
        align-items: center;
    i{
        color: #ff9344;
        font-size: getvw(55);
    }
    p{
        text-indent: getvw(8);
    }
    }
    .right{
            display: flex;
            align-items: center;
            p{
                margin-right: getvw(8);
            }
            i{
                color: #ff9344;
            }
    }
}
.wrap{
    header{
       
        nav{
         .right{
             width: getvw(120);
             height: getvw(55);
             position: relative;
             i{
             font-size: getvw(50);
              }
              .dian{
                text-align: center;
                width: getvw(28);
                height: getvw(28);
                background-color: red;
                border-radius: 50%;
                color: white;
                position: absolute;
                right: getvw(-3);
                top: 0;
                font-size: getvw(20);
                line-height: getvw(28);
              }
         }
        }
        .myBox{
            display: flex;
            justify-content: space-between;
            margin: getvw(19) 0 getvw(26);
            .myself{
                display: flex;
            img{
                width: getvw(170);
            }
            .text{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-size: getvw(30);
                p:last-child{
                    font-size: getvw(26);
                   color: #9d9d9d;
                }
            }
            
            }
        .more{
            align-self: center;
            font-size: getvw(87);
        }
        }
        
         
     }
    main{
        position: relative;
        .conBox{
            display: flex;
            justify-content: space-between;
            .box{
                width: getvw(195);
                height: getvw(150);
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding-bottom:getvw(12) ;
                box-sizing: border-box;
                &:nth-child(1){
                    background-color: #b2e0a0;
                }
                &:nth-child(2){
                    background-color: #a0dce0;
                }
                &:nth-child(3){
                    background-color: #e0b7a0;
                }
                i{
                    color: white;
                    font-size: getvw(80);
                }
                p{
                    font-size: getvw(26);
                }
            }
        }
        .titleBox{ 
            width: 100%;
        .title{
            
            @extend %title;
            
           margin: getvw(35) 0;
            &:nth-child(1){
                .left{
                i{
                    color: #ef9c0a;
                  
                }
                }
            }
            &:nth-child(3){
                .left{
                i{
                    color: #b2e0a0;
                }
                }
            }
            &:nth-child(4){
                .left{
                i{
                    color: #9ddbdf;
                }
                }
            }
        }
        }
        .conBottom{
            margin-top: getvw(100);
            .title{
                @extend %title;
                margin: getvw(35) 0;
            }
            .buttonBox{
                display: flex;
                justify-content: space-around;
                button{
                    width: getvw(147);
                    height: getvw(76);
                    color: white;
                    background-color: #ff9344;
                    border-radius: getvw(38);
                    border: none;
                }
            }
            
        }
    }
}